<style  scoped>
.icon-delete {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 28px;
  color: red;
}
.radio-type {
  position: absolute;
  right: 50px;
  top: 0px;
}
.demo-split {
  height: 650px;
  border: 1px solid #dcdee2;
}
.left-pane .split-pane-left {
  padding: 10px;
  background: #fff;
}
.tdEpi .ivu-table-cell {
  padding-left: 2px !important;
  padding-right: 2px !important;
}
</style>

<template>
  <div>
    <Card class="margin-bottom-10">
      <Row ref="card" :gutter="16">
        <Col span="4">
          <Select @on-change="s=>{ pPage=1;SearchContacts()}"
            filterable label-in-value v-model="areaid" size="large" placeholder="请选择地区">
            <Option v-for="item in areaList" :value="item.Gid" :key="item.Gid">{{ item.AreaName }}</Option>
          </Select>
        </Col>
        <Col span="4">
          <Input size="large" v-model="str" placeholder="姓名/机构/乡镇/村居" />
        </Col>
        <Col span="12">
          <Button
            size="large"
            type="primary"
            icon="ios-search"
            v-on:click="pPage=1;SearchContacts()"
          >查询</Button>
          <Button
            size="large"
            style="margin-left:10px"
            type="primary"
            icon="md-download"
            :loading="exportLoading"
            v-on:click="Export"
          >导出</Button>
        </Col>
        <Col span="4" style="text-align:right">
          <Button
            size="large"
            type="primary"
            icon="ios-add"
            @click="clearWord();modalWord=true;"
          >添加联系人</Button>
        </Col>
      </Row>
    </Card>
    <Modal :mask-closable="false" v-model="modalWord" width="500" >
      <p slot="header" class="color-primary text-align-center">
        <Icon type="ios-information-circle"></Icon>
        <span>联系人</span>
      </p>
      <Form :model="wordTemp" ref="formItem" :label-width="120" :rules="ruleValidate">
        <FormItem label="地区" prop="AreaId">
          <Select label-in-value v-model="wordTemp.AreaId" size="large">
            <Option v-for="item in areaList" :value="item.Gid" :key="item.Gid">{{ item.AreaName }}</Option>
          </Select>
        </FormItem>
        <FormItem label="姓名" prop="Name">
          <Input v-model="wordTemp.Name" />
        </FormItem>
        <FormItem label="手机" prop="Phone">
          <Input v-model="wordTemp.Phone" />
        </FormItem>
          <FormItem label="办公室电话" prop="Phone2">
          <Input v-model="wordTemp.Phone2" />
        </FormItem>
        <FormItem label="职务" prop="Job">
          <Input v-model="wordTemp.Job" />
        </FormItem>
        <FormItem label="机构/乡镇/村居" prop="Organization">
          <Input v-model="wordTemp.Organization" />
        </FormItem>
      </Form>

      <div slot="footer">
        <Button :loading="loading2" type="primary" size="large" @click="SaveContacts()">保存</Button>
      </div>
    </Modal>
    <Table
      border
      :loading="loading"
      :columns="tableTitle"
      :data="tableData"
      ref="table"
      :height="tableHeight"
    ></Table>

    <Row class="margin-top-10">
      <Page
        :total="total"
        :current="pPage"
        :page-size="pSize"
        :page-size-opts="[50,100,300,500,1000,2000,5000]"
        @on-change="s=>{pPage=s;SearchContacts();}"
        @on-page-size-change="p=>{pSize=p;pPage=1;SearchContacts()}"
        show-total
        show-sizer
      />
    </Row>
  </div>
</template>
<script>
import dayjs from "dayjs";
import excel from "@/libs/excel";
import { Message, Modal } from "view-design";
import Refresh from "@/components/refresh";
import { hasOneOf } from "@/libs/tools";
import {
  SearchContacts,
  DeleteContacts,
  SaveContacts,
  SearchArea
} from "@/api/data";
import { getToken, baseUrl } from "@/libs/util";
export default {
  name: "contacts",
  data() {
    return {
      modalWord: false,
      loading: false,
      loading2: false,
      exportLoading: false,
      tableHeight: 450,
      uploading: false,
      areaList: [],

      tableTitle: [
        { title: "序号", key: "R_INDEX", width: 80, align: "center" },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.wordTemp = params.row;
                      this.modalWord = true;
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.DeleteContacts(params.row.Gid);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        },
        {
          title: "机构/乡镇/村居",
          key: "Organization",
          align: "center",
          width: 200
        },
        {
          title: "姓名",
          key: "Name",
          align: "center",
          width: 150
        },
        {
          title: "职务",
          key: "Job",
          align: "center",
          width: 150
        },
        {
          title: "手机",
          key: "Phone",
          align: "center",
          minWidth: 150
        },
         {
          title: "办公室电话",
          key: "Phone2",
          align: "center",
          minWidth: 150
        },
        {
          title: " ",
          key: " ",
          align: "center"
        }
      ],
      tableData: [],
      total: 0,
      pPage: 1,
      pSize: 50,
      str: "",
      areaid: "",
      AreaList: [],
      wordTemp: {
        Name: "",
        Phone: "",
        Job: "",
        Organization: ""
      },

      ruleValidate: {
        Name: [
          {
            required: true,
            message: "不能为空"
          }
        ],
        Phone: [
          {
            required: true,
            message: "不能为空"
          }
        ],
         AreaId: [
          {
            required: true,
            message: "不能为空"
          }
        ]
      }
    };
  },
  computed: {},
  methods: {
    clearWord() {
      this.wordTemp = {
        Name: "",
        Phone: "",
        Job: "",
        Organization: ""
      };
    },
    SearchArea() {
      let vm = this;
      SearchArea().then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.areaList = data.Data;
          vm.areaList.unshift({
            Gid: "",
            AreaName: "选择地区"
          });
        } else {
          Message.error(data.Message);
        }
      });
    },
    SearchContacts() {
      let vm = this;
      vm.loading = true;
      var reqData = {
        str: vm.str,
        areaid: vm.areaid,
        page: vm.pPage,
        size: vm.pSize
      };
      SearchContacts(reqData).then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.total = data.Data.Total;
          vm.tableData = data.Data.Rows;
        } else {
          Message.error(data.Message);
        }
        vm.loading = false;
      });
    },

    DeleteContacts(id) {
      Modal.confirm({
        title: "提示",
        content: "确定要删除此联系人吗？",
        onOk: () => {
          DeleteContacts(id).then(res => {
            const data = res.data;
            if (data.Type == 1) {
              this.SearchContacts();
              this.$Message.success({ title: "提示", content: "删除成功" });
            } else {
              this.$Modal.error({ title: "提示", content: data.Message });
            }
          });
        },
        onCancel: () => {}
      });
    },
    SaveContacts() {
      let vm = this;
      this.$refs["formItem"].validate(valid => {
        if (valid) {
          vm.loading2 = true;
          SaveContacts(vm.wordTemp).then(res => {
            const data = res.data;
            if (data.Type == 1) {
              vm.modalWord = false;
              this.SearchContacts();
              this.$Message.success({ title: "提示", content: "保存成功" });
            } else {
              this.$Modal.error({ title: "提示", content: data.Message });
            }
            vm.loading2 = false;
          });
        }
      });
    },
    Export() {
      if (this.tableData.length) {
        this.exportLoading = true;
        const params = {
          title: ["机构/乡镇/村居", "姓名", "职务", "联系方式"],
          key: ["Organization", "Name", "Job", "Phone"],
          data: this.tableData,
          autoWidth: true,
          filename: "联系方式"
        };
        excel.export_array_to_excel(params);
        this.exportLoading = false;
        this.SaveActionLog("导出", this.groupname);
      } else {
        this.$Message.info("表格数据不能为空！");
      }
    }
  },
  created() {},
  mounted() {
    let vm = this;
    var cardHeight = this.$refs.card.$el.offsetHeight;
    this.tableHeight = window.innerHeight - cardHeight - 260;

    this.SearchArea();

    this.SearchContacts();
  }
};
</script>
